<template>
	<view class="recommend">
		<view class="circle-bg"></view>
		<page-header></page-header>
		<scroll-view class="nav" scroll-x='true'>
			<view :class="['nav-item', {'ac': navAc == 0}]" @tap="tapNav(0)">推荐</view>
			<view :class="['nav-item', {'ac': navAc == 1}]" @tap="tapNav(1)">在售</view>
		</scroll-view>
		<view v-show="navAc==0" class="recommend-page">
			<view class="swiper-box">
				<swiper class="swiper" next-margin='140rpx' @change="swiperChange">
					<swiper-item v-for="(item, index) in recommendList" :key='index'>
						<view class="box" @tap='goDetail(index)'>
							<image :src="item.goods_headimg" mode="aspectFill"></image>
							<view class="like" v-if='item.uid'>
								<view class="icon"></view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<func-bar v-if="requested" :goodid='recommendList[current].id' :index='current' :islike='recommendList[current].uid'
			 :like='recommendList[current].like_number' :comment='recommendList[current].comment_number' :share='recommendList[current].share_number'
			 @praise='praise' @comment='comment'></func-bar>
		</view>
		<view v-show="navAc==1" class="store-page">
			<pro-list :list="storeList" :label='true' @tapItem='goDetail'></pro-list>
			<view v-show="isEmpty">
				<empty></empty>
			</view>
			<view v-show="!isEmpty">
				<load-more :status="loadStatus"></load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import PageHeader from '@/components/page-header/page-header'
	import FuncBar from '@/components/func-bar/func-bar'
	import ProList from '@/components/pro-list/pro-list'
	import LoadMore from '@/components/uni-load-more/uni-load-more'
	import empty from '@/components/empty/empty'
	import storage from '@/commen/utils/storage'

	import {
		getRecommendList,
		getStoreList,
		getUserInfo,
		goodsShare
	} from '@/commen/js/config.js'

	export default {
		data() {
			return {
				navAc: 0, // 当前活动的nav
				tapAc: 0, // 当前活动的tab
				recommendPage: 1, // 推荐页数
				storePage: 1, // 店铺页数
				recommendList: [], // 推荐商品列表
				storeList: [], // 店铺商品列表
				current: 0, // 当前推荐商品
				isEmpty: false, // 是否为空
				loadStatus: 'more', // more-loading前；loading-loading中；noMore-没有更多了
				requestKey: true, // 请求开关
				requested: false, // 是否请求完毕
			}
		},
		components: {
			PageHeader,
			FuncBar,
			ProList,
			LoadMore,
			empty
		},
		onLoad(ops) {
			if (ops.id) {
				storage.set('referrerId', ops.id)
			}
			if (ops.q) {
				const url = decodeURIComponent(ops.q)
				let storeId
				if (~url.indexOf('store_id')) {
					const params = url.split('=')
					storeId = params[1]
					storage.set('storeId', storeId)
					console.log('storeId',storeId)
				}
			}
			this.getRecommendList()
			this.listenerEvent()
		},
		onShow() {
			uni.$emit('updateToekn')
			this.getUserInfo()
		},
		onPullDownRefresh() {
			if (this.navAc == 0) {
				uni.stopPullDownRefresh()
			} else {
				this.init()
				this.getStoreList()
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 800)
			}
		},
		onReachBottom() {
			if (!this.requestKey) return
			this.storePage++
			this.getStoreList()
		},
		onShareAppMessage(res) {
			this.shareApp()
			return {
				title: '衣知猫',
				path: `pages/index/recommend/recommend?id=${storage.get('id', 'userinfo')}`,
			}
		},
		methods: {
			// 获取推荐列表
			async getRecommendList() {
				const params = {
					token: storage.get('token') || ''
				}
				const [err, res] = await getRecommendList(params)
				this.recommendList = res.list
				this.requested = true
			},
			// 分享
			async shareApp() {
				const params = {
					token: storage.get('token') || '',
					goods_id: this.recommendList[this.current].id
				}
				const [err, reqres] = await goodsShare(params)
				if (reqres) {
					this.$toast('分享成功')
					this.recommendList[this.current].share_number++
				}
			},
			// 获取个人资料
			async getUserInfo() {
				if (storage.get('token')) {
					const params = {
						token: storage.get('token')
					}
					const [err, res] = await getUserInfo(params)
					if (res && res.info) {
						storage.set('userinfo', res.info)
					}
				}
			},
			// 推荐列表轮播改变
			swiperChange(e) {
				this.current = e.detail.current
			},
			// 前往推荐详情
			goDetail(index) {
				let list
				if (this.navAc == 0) {
					list = this.recommendList
				} else if (this.navAc == 1) {
					list = this.storeList
				}
				this.$open('/pages/index/clothes-detail/clothes-detail', {
					productInfo: encodeURIComponent(JSON.stringify(list[index])),
					type: this.navAc,
					index: index
				})
			},
			// 点赞/取消点赞
			praise(data) {
				if (data.isLike) {
					this.recommendList[data.index].like_number++
				} else {
					this.recommendList[data.index].like_number--
				}
				this.recommendList[data.index].uid = data.isLike
			},
			// 评论
			comment(data) {
				this.recommendList[data.index].comment_number++
				uni.$emit('refreshFunc')
			},
			// 初始化
			init() {
				this.isEmpty = false
				this.requestKey = true
				this.storePage = 1
				this.storeList = []
			},
			// 获取本店商品
			async getStoreList() {
				if (!storage.get('token')) {
					this.isEmpty = true
					this.$open('/pages/common/login/login')
				}
				this.loadStatus = 'loading'
				const params = {
					token: storage.get('token'),
					page: this.storePage
				}
				const [err, res] = await getStoreList(params)
				if (res) {
					if (res.list.length == 0 && this.storePage == 1) {
						this.isEmpty = true
						this.requestKey = false
						return
					} else if (res.list.length == 0 && this.storePage > 1) {
						this.loadStatus = 'noMore'
						this.requestKey = false
						return
					}
					this.storeList = this.storeList.concat(res.list)
					if (res.list.length < 15 && this.storePage == 1) {
						this.loadStatus = 'noMore'
						this.requestKey = false
						return
					}
					this.loadStatus = 'more'
				} else {
					this.isEmpty = true
				}

			},
			// 切换nav
			tapNav(index) {
				this.navAc = index
				if (index == 1 && this.storeList == 0) {
					this.getStoreList()
				}
			},
			// 监听全局事件
			listenerEvent() {
				// 推荐详情的点赞/取消点赞
				uni.$on('clothePraise', (data) => {
					if (data.isLike) {
						this.recommendList[data.index].like_number++
					} else {
						this.recommendList[data.index].like_number--
					}
					this.recommendList[data.index].uid = data.isLike
				})
				// 推荐详情的评论
				uni.$on('clotheComment', (data) => {
					this.recommendList[data.index].comment_number++
					uni.$emit('refreshFunc')
				})
				// 推荐详情的分享
				uni.$on('clotheShare', (data) => {
					this.recommendList[data.index].shareNumber = data.
					uni.$emit('refreshFunc')
				})
				// 刷新
				uni.$on('refreshIndex', (data) => {
					this.getRecommendList()
					this.init()
					if (this.navAc == 1) {
						this.getStoreList()
					}
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.recommend {
		position: relative;
		@include box-w(100%, $color-e);
		@include flex-col(flex-start);
		overflow-x: hidden;

		.circle-bg {
			@include top(262rpx);
			z-index: 0;
			@include box(1200rpx, 950rpx, $bg-c);
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 50%;
		}

		.nav {
			@include box-w(100%);
			margin-top: 262rpx;
			padding: 0 32rpx;

			.nav-item {
				position: relative;
				@include box-i(116rpx, 46rpx);
				@include font-set($font-a, $color-b);
				text-align: center;
				line-height: 46rpx;
				z-index: 1;

				&.ac {
					color: $color-c;
					font-weight: bold;

					&::after {
						content: '';
						@include box(100%, 20rpx, $bg-b);
						border-radius: 12rpx;
						@include bottom();
						z-index: -1;
					}
				}

				&+.nav-item {
					margin-left: 60rpx;
				}
			}
		}

		.recommend-page {
			.swiper-box {
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				@include box-h(730rpx);
				@include flex-row();

				.swiper {
					@include box(690rpx, 100%);

					swiper-item {
						@include box(460rpx, 100%);
						padding:20rpx 0 10rpx 20rpx;

						.box {
							@include box(100%, 691rpx);
							
							.like {
								@include right-bottom(82rpx, 46rpx);
								@include circle(76rpx);
								@include flex-row();
								background-image: url('');

								.icon {
									@include box(32rpx, 28rpx);
									background: url('') no-repeat center/contain;
									margin-top: 1rpx;
								}
							}

							image {
								@include box(461rpx, 691rpx);
								box-shadow:5rpx 5rpx 15rpx rgba(0,0,0,0.2);
								border-radius: 25rpx;
							}
						}
					}
				}
			}
		}

		.store-page {
			position: relative;
			z-index: 1;
			@include box-w(100%, $bg-c);
			padding-top: 60rpx;
		}

	}
</style>
